<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="400" height="350" style="border: 1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');
    
    // --- Style Settings ---
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = 'bold 16px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Helper Functions ---
    function drawLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
    }
    
    function drawPoint(x, y, label) {
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText(label.text, label.x, label.y);
    }

    function drawBulb(x, y, labelText, labelPos) {
        const radius = 15;
        // Outer circle
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // Inner filament loop (tilted oval using two quadratic curves)
        const r_loop = radius * 0.6;
        ctx.beginPath();
        ctx.moveTo(x - r_loop, y);
        ctx.quadraticCurveTo(x, y - r_loop * 1.5, x + r_loop, y);
        ctx.quadraticCurveTo(x, y + r_loop * 1.5, x - r_loop, y);
        ctx.stroke();
        
        // Label
        ctx.fillText(labelText, labelPos.x, labelPos.y);
    }
    
    // --- Coordinates & Parameters ---
    const pX = 80, pY = 50;
    const qX = 220, qY = 50;
    const xX = 220, xY = 300;
    const rightBranchX = 320;
    
    const bulbRadius = 15;
    const bulb1X = 150, bulb1Y = pY;
    const bulb2X = qX, bulb2Y = 125;
    const bulb3X = qX, bulb3Y = 225;
    const bulb4X = rightBranchX, bulb4Y = 175;
    
    const batteryX = pX;
    const batteryCenterY = 175;
    const batteryPlateVOffset = 15;
    const batteryLongPlateWidth = 20;
    const batteryShortPlateWidth = 10;

    // --- Drawing Wires ---
    drawLine(pX, pY, bulb1X - bulbRadius, bulb1Y); // P to Bulb 1
    drawLine(bulb1X + bulbRadius, bulb1Y, qX, qY); // Bulb 1 to Q
    drawLine(qX, qY, rightBranchX, qY); // Top wire (Q to right)
    drawLine(batteryX, xY, rightBranchX, xY); // Bottom wire

    // Left branch (P -> Battery -> bottom wire)
    drawLine(pX, pY, batteryX, batteryCenterY - batteryPlateVOffset);
    drawLine(batteryX, batteryCenterY + batteryPlateVOffset, batteryX, xY);

    // Middle branch (Q -> Bulb 2 -> Bulb 3 -> X)
    drawLine(qX, qY, bulb2X, bulb2Y - bulbRadius);
    drawLine(bulb2X, bulb2Y + bulbRadius, bulb3X, bulb3Y - bulbRadius);
    drawLine(bulb3X, bulb3Y + bulbRadius, xX, xY);

    // Right branch (Q -> Bulb 4 -> X)
    drawLine(rightBranchX, qY, bulb4X, bulb4Y - bulbRadius);
    drawLine(bulb4X, bulb4Y + bulbRadius, rightBranchX, xY);

    // --- Drawing Components ---
    // Battery
    ctx.beginPath();
    ctx.moveTo(batteryX - batteryLongPlateWidth, batteryCenterY - batteryPlateVOffset); // Positive Plate (Long)
    ctx.lineTo(batteryX + batteryLongPlateWidth, batteryCenterY - batteryPlateVOffset);
    ctx.moveTo(batteryX - batteryShortPlateWidth, batteryCenterY + batteryPlateVOffset); // Negative Plate (Short)
    ctx.lineTo(batteryX + batteryShortPlateWidth, batteryCenterY + batteryPlateVOffset);
    ctx.stroke();
    ctx.fillText('ξ', batteryX - 35, batteryCenterY);

    // Bulbs
    drawBulb(bulb1X, bulb1Y, '#1', {x: bulb1X - 30, y: bulb1Y - 10});
    drawBulb(bulb2X, bulb2Y, '#2', {x: bulb2X - 30, y: bulb2Y});
    drawBulb(bulb3X, bulb3Y, '#3', {x: bulb3X - 30, y: bulb3Y});
    drawBulb(bulb4X, bulb4Y, '#4', {x: bulb4X - 30, y: bulb4Y});

    // --- Drawing Points & Labels ---
    drawPoint(pX, pY, {text: 'P', x: pX - 15, y: pY});
    drawPoint(qX, qY, {text: 'Q', x: qX + 15, y: qY - 5});
    drawPoint(xX, xY, {text: 'X', x: xX + 15, y: xY + 5});
</script>
</body>
</html>